<template>
  <div>
    <div style="width: 1000px;">
      <el-table
        :data="data"
        style="width: 100%"
        border
      >
        <el-table-column
          label="订单详情"
          prop="info"
          width="400px"
        >
          <template #header>
            <el-select
              v-model="selected"
              style="width: 125px; margin-right: 10px;"
            >
              <el-option
                v-for="(item, index) in times"
                :key="index"
                :value="item.value"
                :label="item.label"
              >{{ item.label }}</el-option>
            </el-select>
            订单详情
          </template>
          <template #default="scope">
            <commodity-info :row="scope.row"></commodity-info>
          </template>
        </el-table-column>
        <el-table-column
          label="收货人"
          prop="username"
          header-align="center"
        >
          <template #default="scope">
            <div style="display: flex; justify-content: center; align-items: center; font-size: 16px;">
              {{ scope.row.name }} <el-icon style="margin-left: 5px;">
                <User />
              </el-icon>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="金额"
          prop="price"
          header-align="center"
        >
          <template #default="scope">
            <div style="display: flex; justify-content: center; font-size: 16px; color: #aaaaaa;">
              ￥{{ (scope.row.price).toFixed(2) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="状态"
          prop="status"
          header-align="center"
        >
          <template #header>
            <el-select v-model="tab.value">
              <el-option
                v-for="(item, index) in status"
                :key="index"
                :value="item.value"
                :label="item.label"
              >{{ item.label }}
              </el-option>
            </el-select>
          </template>
          <template #default="scope">
            <commodity-status :id="scope.row.orderDetailId" :status="scope.row.logisticsState"></commodity-status>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          prop="operation"
          header-align="center"
        >
          <template #default="scope">
            <div
              v-show="scope.row.logisticsState !== 0"
              style="display: flex; flex-direction: column; justify-content: center; align-items: center; color: #3c3c3c"
            >
              <span>
                <span
                  class="operation"
                  @click="this.$router.push({path: '/commodity/comment', query: {id: scope.row.orderDetailId}})"
                >评价</span>|
                <span
                  class="operation"
                  @click="doDelOrderDetail(scope.row.orderDetailId)"
                >删除</span>
              </span>
            </div>
            <div
              v-show="scope.row.logisticsState === 0"
              style="display: flex; flex-direction: column; justify-content: center; align-items: center; color: #3c3c3c"
            >
              <div style="font-size: 12px;">
                倒计时<span style="color: #e31613;"> {{ scope.row.countDown }}</span>
              </div>
              <el-button @click="handleToPay(scope.row.orderId)">去结算</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div style="width: 100%; display: flex; justify-content: end; margin-top: 10px;">
        <el-pagination
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          @prev-click="handlePrevClick"
          @next-click="handleNextClick"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { selectAllOrderDetail, delOrderDetail } from "@/api/orderDetail";
import CommodityInfoVue from "./CommodityInfo.vue";
import CommodityStatusVue from "./CommodityStatus.vue";

import { useOrderInfo } from "@/store/order";
const orderInfo = useOrderInfo();

import { ElMessage } from "element-plus";

export default {
  components: {
    CommodityInfo: CommodityInfoVue,
    CommodityStatus: CommodityStatusVue,
  },
  props: {
    tab: Object,
  },
  data() {
    return {
      times: [
        { label: "近三个月", value: 1 },
        { label: "今年内订单", value: 2 },
      ],
      status: [
        { label: "全部状态", value: -1 },
        { label: "待付款", value: 0 },
        { label: "待收货", value: 3 },
        { label: "完成", value: 4 },
      ],
      selected: 1,
      page: 0,
      pageSize: 10,
      data: [],
      total: 0,
      key: "",
      countDown: "",
      timer: null,
    };
  },
  methods: {
    doSelectAllOrderDetail() {
      selectAllOrderDetail(
        this.selected,
        this.page,
        this.pageSize,
        this.tab.value,
        this.key
      ).then((res) => {
        this.data = res.list;
        this.total = res.total;

        for (var i = 0; i < this.data.length; i++) {
          this.startCountDown(i);
        }
      });
    },
    doDelOrderDetail(id) {
      delOrderDetail(id).then((res) => {
        this.data = this.data.filter((v, i, a) => v.orderDetailId != id);
        ElMessage({
          message: "删除成功",
          type: "success",
        });
      });
    },

    startCountDown(index) {
      if (this.data[index].logisticsState !== 0) {
        return
      }
      this.data[index].timer = setInterval(() => {
        const now = new Date().getTime();
        const target = new Date(this.data[index].time).getTime();

        const distance = target - now;
        const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((distance % (1000 * 60)) / 1000);

        this.data[index].countDown = `${minutes} 分钟 ${seconds} 秒`;

        if (distance < 0) {
          clearInterval(this.data[index].timer);
          this.data[index].countDown = "";
          // this.doSelectAllOrderDetail();
        }
      }, 1000);
    },

    handleSelectAllOrderDetail() {
      this.key = "";
      this.doSelectAllOrderDetail();
    },
    handleSelectAllOrderDetailByKey(key) {
      this.selected = 1;
      this.page = 0;
      this.pageSize = 10;
      this.tab.value = -1;
      this.key = key;
      this.doSelectAllOrderDetail();
    },
    handlePrevClick(value) {
      this.page = (value - 1) * this.pageSize;
      this.doSelectAllOrderDetail();
    },
    handleNextClick(value) {
      this.page = (value - 1) * this.pageSize;
      this.doSelectAllOrderDetail();
    },
    handleCurrentChange(value) {
      this.page = (value - 1) * this.pageSize;
      this.doSelectAllOrderDetail();
    },
    handleToPay(orderId) {
      orderInfo.orderId = orderId;
      this.$router.push("/pay");
    },
  },
  watch: {
    selected(newValue, oldValue) {
      this.doSelectAllOrderDetail();
    },
    tab(newValue, oldValue) {
      this.doSelectAllOrderDetail();
    },
  },
  created() {
    this.doSelectAllOrderDetail();
  },
};
</script>

<style scoped>
.operation:hover {
  color: #3271ae;
  cursor: pointer;
}
</style>